<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo页面</title>
</head>
<body>
  <!-- <div class="left">
    <div>区划编码：</div>
    <div></div>
  </div> -->
  <div class="info">
    <div id="change"><span>修改区划: </span><input type="text" id="areaInput" placeholder="请输入区划编码" /><button id="btn">修改</button></div>
    <div id="mapLoaded">
      <span>地图加载：</span>
      <span>false</span>
    </div>
    <div id="areaChange">
      <span>当前区划：</span>
      <span>330109</span>
    </div>
    <div id="3dSwitch">
      <span>是否切换3D：</span>
      <span>false</span>
    </div>
    <div id="selHouse">
      <span>选中房屋ID：</span>
      <span>未选中</span>
    </div>
    <div id="zoomEnd">
      <span>当前zoom level：</span>
      <span>无</span>
    </div>
    <div id="mapReset">
      <span>地图重置：</span>
      <span>false</span>
    </div>
    <div id="pointChecked">
      <span>选中点位：</span>
      <span>无</span>
    </div>
    <div id="pickStatusChange">
      <span>点击地图选择区划能力：</span>
      <span>无</span>
    </div>
    <div>
      <button id="render">发送数据渲染图标</button>
    </div>
    <div>
      <button id="render2">展示特定种类图标</button>
    </div>
    <div>
      <button id="render3">发送数据渲染聚合图</button>
    </div>
    <div>
      <button id="clear">清除图层</button>
    </div>
    <div>
      <button id="areaPick">变更区划选择能力</button>
    </div>
    <div>
      <button id="realtimePoint">渲染实时点位</button>
    </div>
    <div>
      <button id="changeTiles">改变建筑纹理</button>
    </div>
    <div>
      <button id="clearTiles">清除建筑物纹理</button>
    </div>
    <div id="zoomChange">
      <span>zoom: </span><input type="text" id="zoomInput" placeholder="请输入zoom level" />
      <button id="zoomBtn">修改</button>
    </div>
    <div>
      <button id="reset">重置地图</button>
    </div>
    <div>
      <button id="switch3d">立体房屋切换</button>
    </div>
  </div>
  <div class="container">
    <iframe src="http://10.32.86.79:39180/eleOverview?areaPickStatus=false" frameborder="0" width="900" height="600"></iframe>
  </div>
</body>
</html>

<style>
  body{
    background-color: lightcyan;
  }
  .left {
    position: absolute;
    left: 10px;
    top: 0;
  }
  .info {
    position: absolute;
    right: 0;
    width: 300px;
    z-index: 1000;
  }
  .info > * {
    margin-bottom: 20px;
  }
  .container {
    background-color: #fff;
    width: 900px;
    height: 600px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
</style>

<script src="./md5.min.js"></script>
<script src="./testInfo.js"></script>
<script>
  const eventList = [
    {name: 'mapLoaded', value: ['success']},
    {name: 'areaChange', value: ['areaCode']},
    {name: '3dSwitch', value: ['is3D']},
    {name: 'selHouse', value: ['houseId']},
    {name: 'zoomEnd', value: ['zoomLevel']},
    {name: 'mapReset', value: ['success']},
    {name: 'pointChecked', value: ['pointInfo.id']},
    {name: 'pickStatusChange', value: ['status']},
  ];
  // 发送
  function send(event, params) {
    let ifr = document.getElementsByTagName('iframe')[0];
    ifr.contentWindow.postMessage({
      from: md5('xiaoshan'), // 必传
      event,
      ...params
    }, '*');
  }
  let btn = document.getElementById("btn");
  btn.onclick = () => send('emitAreaChange', {areaCode: document.getElementById('areaInput').value});
  
  // 传入数据渲染Icon
  let renderBtn = document.getElementById('render');
  renderBtn.onclick = () => send('emitRenderPoint', {
    renderData: testInfo,
    iconData:testIcon
  });
  let render2Btn = document.getElementById('render2');
  render2Btn.onclick = () => send('emitRenderPoint', {
    renderData: testInfo,
    iconData:testIcon,
    renderType: ['point'],
  });
  // 渲染聚合图
  let render3Btn = document.getElementById('render3');
  render3Btn.onclick = () => send('emitRenderPoint', {
    renderData: testInfo,
    iconData: testIcon,
    isCluster: true
  })
  // 渲染实时点位
  let timer;
  let idx = 0;
  let zoom = 0;
  let realtimeData = [
    {
      "id": "330109505498001000137",
      "houseId": "330109505498001000137",
      "familyDisputeCount": 1,
      "epidemicHighObjlevel": "1",
      "epidemicLevel": 1,
      "familyDisputeObjlevel": "1",
      "lon": "120.2302061",
      "build_height": "135.0",
      "lat": "30.23773832",
      "icon": "point",
      "activeIcon": "activePoint",
    },
  ];
  let render4Btn = document.getElementById('realtimePoint');
  render4Btn.onclick = realtimeSend;
  function realtimeSend() {
    if (timer) {
      render4Btn.innerHTML = '渲染实时点位';
      clearInterval(timer);
      timer = null;
      return;
    } else {
      zoom = 18;
      render4Btn.innerHTML = '停止渲染实时点位';
      send('emitRenderPoint', {
        renderData: realtimeData,
        iconData: testIcon,
        isRealTime: true,
        zoom
      });
      zoom = 0;
    }
    timer = setInterval(() => {
      realtimeData[0]['lon'] = parseFloat(realtimeData[0]['lon']) + 0.00005 * Math.random();
      realtimeData[0]['lat'] = parseFloat(realtimeData[0]['lat']) + 0.00008 * Math.random();
      send('emitRenderPoint', {
        renderData: realtimeData,
        iconData: testIcon,
        isRealTime: true,
        zoom
      });
    }, 2000);
  }

  // 改变建筑物纹理
  let render5Btn = document.getElementById('changeTiles');
  render5Btn.onclick = () => {
    send('emitChangeTiles', {
      fwmCustomTiles: fwmCustomTiles
    });
  }
  // 清除建筑物纹理
  let render6Btn = document.getElementById('clearTiles');
  render6Btn.onclick = () => {
    send('emitClearTiles');
  }

  // 修改地图区划选择能力
  let changeAreaPick = document.getElementById('areaPick');
  changeAreaPick.onclick = () => send('emitChangePickStatus');

  // 清除Icon图层
  let clearBtn = document.getElementById('clear');
  clearBtn.onclick = () => send('emitClearPoint');

  // 设置zoom level
  let zoomInput = document.getElementById('zoomInput');
  let zoomBtn = document.getElementById('zoomBtn');
  zoomBtn.onclick = () => {
    let zoomLevel = zoomInput.value;
    console.log('====zoomlevel:', zoomLevel);
    if (!zoomLevel) return alert('请输入zoomLevel!');
    send('emitZoomTo', {
      zoomLevel, // 最大18，最小11, 必传
      coordinates: [120.251246, 30.212627]// 中心点，非必传
    });
  }

  // 地图重置
  let resetBtn = document.getElementById('reset');
  resetBtn.onclick = () => {
    send('emitMapReset');
  }

  let switch3d = document.getElementById('switch3d');
  switch3d.onclick = () => {
    send('emitSwitch3d');
  }

  // 接收
  window.onmessage = (e) => {
    let idx = eventList.map(it => it.name).indexOf(e.data.event);
    if (e.data.from === md5('geostar') && idx !== -1) {
      console.log('====收到子页面传参:', e.data.event, e.data);
      if (e.data.event === 'selHouse') {
        let popContent = [
          {name: '楼栋编码', value: '1231123123'},
          {name: '楼栋ID', value: e.data.houseId},
          {name: '楼盘名称', value: '汤臣一品'},
          {name: '楼盘名称', value: '汤臣一品'}]
        // 触发弹窗事件
        send('emitHouseModal', {
          houseId: e.data.houseId,
          popContent,
          lngLat: e.data.lngLat
        });
      }
      let valNode = document.getElementById(eventList[idx].name).children[1];
      let valStr = eventList[idx].value.reduce((sum, next, idx) => {
        let addStr = '';
        if (next.includes('.')) {
          let strAry = next.split('.');
          addStr = getVal(strAry, e.data);
        } else {
          addStr = e.data[next];
        }
        return sum + addStr;
      }, '');
      valNode.innerHTML = valStr;
    }
  }

  function getVal(strAry, obj) {
    let res;
    strAry.forEach((it, idx) => {
      if (strAry.length === 1) {
        res = obj[it];
      } else {
        strAry.shift();
        res = getVal(strAry, obj[it]);
      }
    });
    return res;
  }
</script>